<!DOCTYPE html>
<html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title th:text="${appTitle}"></title>
		<link rel="icon" href="../static/favicon.png" th:href="@{/img/favicon.png}" type="image/x-icon" />
    	<link rel="shortcut icon" href="../static/favicon.png" th:href="@{/img/favicon.png}" type="image/x-icon" />
		<!-- zui -->
		<link href="../static/css/zui.min.css" rel="stylesheet" th:href="@{/css/zui.min.css}">
		<link href="../static/css/style.css" rel="stylesheet" th:href="@{/css/style.css}">
		<!--[if lt IE 9]>
		   <script src="../static/lib/ieonly/html5shiv.js" th:src="@{/lib/ieonly/html5shiv.js}"></script>
		   <script src="../static/lib/ieonly/respond.js" th:src="@{/lib/ieonly/respond.js}"></script>
		   <script src="../static/lib/ieonly/excanvas.js" th:src="@{/lib/ieonly/excanvas.js}"></script>
		<![endif]-->
	</head>

	<body>
		<div class="container">
			<div id="loginContent" class="col-md-8 col-md-offset-2">
				<div class="panel">
					<div class="panel-heading">
						<img src="../static/img/openthinks-logo-100.png" th:src="@{/img/openthinks-logo-100.png}"  width="100px" class="img-responsive center-block"> 
						<h4 class="text-center"><span th:text="${appTitle}">SVM</span> <small class="svm-version" th:text="${appVersion}">1.0</small></h4>
					</div>
					<div class="panel-body">
						<form method="post" action="/login" th:action="@{/login}">
							<div class="form-group">
								<div class="input-control has-icon-left">
									<input id="userName" name="userName" type="text" class="form-control" placeholder="用户名" required th:placeholder="#{login.placeholder.userName}">
									<label for="userName" class="input-control-icon-left"><i class="icon icon-user "></i></label>
								</div>
							</div>
							<div class="form-group">
								<div class="input-control has-icon-right">
									<input id="userPass" name="userPass" type="password" class="form-control" placeholder="密码" required th:placeholder="#{login.placeholder.userPass}">
									<label for="userPass" class="input-control-icon-right"><i class="icon icon-key"></i></label>
								</div>
							</div>
							<div class="form-group">
								<div class="">
									<div class="checkbox">
										<label>
          									<input type="checkbox" name="remember-me"> <span th:text="#{login.checkbox.rememberMe}">记住我</span>
        								</label>
									</div>
								</div>
								<hr>
								<div class="form-group">
									<button type="submit" class="btn btn-primary"><i class="icon icon-signin"></i> <span th:text="#{login.button.submit}">登录</span></button>
								</div>
						</form>
						</div>
					</div>
				</div>
			</div>
		</div>
		<input type="hidden" value="您已注销成功" th:value="#{login.result.success}" name="h_notify" th:if="${param.logout}" data-type="success" data-icon="ok-sign" />
		<input type="hidden" value="用户名或密码错误" th:value="#{login.result.error}" name="h_notify" th:if="${param.error}" data-type="danger" data-icon="exclamation-sign" />
		<!-- jQuery (ZUI中的Javascript组件依赖于jQuery) -->
		<script src="../static/lib/jquery/jquery.js" th:src="@{/lib/jquery/jquery.js}"></script>
		<!-- ZUI Javascript组件 -->
		<script src="../static/js/zui.min.js" th:src="@{/js/zui.min.js}"></script>

		<script>
			$(document).ready(function() {
				function showNotify($hs) {
					if($hs.length > 0) {
						$hs.each(function() {
							$h = $(this);
							var myMessager = new $.zui.Messager({
								type: $h.data('type'),
								icon: $h.data('icon')
							});
							myMessager.show($h.val());
						})
					}
				}
				showNotify($('[name=h_notify]'));
			});
		</script>
	</body>

</html>